<template>
  <main class="taskCase_container">
    <h2>资源管理-观测卫星管理</h2>
    <header class="flex flex-between">
      <div class="aside">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="卫星编号">
            <el-input
              v-model="formInline.wxbh"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入卫星编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="卫星标识">
            <el-input
              v-model="formInline.wxbs"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入卫星标识"
            ></el-input>
          </el-form-item>
          <el-form-item label="传感器标识">
            <el-input
              v-model="formInline.cgqbs"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入传感器标识"
            ></el-input>
          </el-form-item>
          <!--          <el-form-item label="时间：">-->
          <!--            <el-date-picker v-model="formInline.times" type="daterange" range-separator="至" start-placeholder=""-->
          <!--              end-placeholder="">-->
          <!--            </el-date-picker>-->
          <!--          </el-form-item>-->

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="aside">
        <el-button size="small" type="primary" @click="handleImportExcel"
          >导入</el-button
        >
        <el-button size="small" type="primary" @click="addNewTaskCase(1)"
          >添加观测卫星</el-button
        >
        <el-button size="small" type="primary" @click="DeleteObservationData"
          >批量删除</el-button
        >
      </div>
    </header>
    <main class="table_container">
      <custom-table
        :columns="columns"
        :tableData="tableData"
        select
        index
        :handleSelectionChange="handleSelectionChange"
        :height="'75vh'"
      >
        <template v-slot:action="scope">
          <span class="operation" @click="EditObservationData(scope.row)"
            >编辑</span
          >
          <el-divider direction="vertical"></el-divider>
          <span class="operation" @click="DeleteObservationData(scope.row)"
            >删除</span
          >
        </template>
      </custom-table>
    </main>

    <footer class="fl_row_start">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageCurrent"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </footer>

    <el-dialog
      :title="taskCaseBool ? '添加观测卫星' : '编辑观测卫星'"
      :visible.sync="dialogVisible"
      @close="cancel('ruleForm')"
    >
      <el-form
        :label-position="labelPosition"
        label-width="140px"
        :model="formLabelAlign"
        size="small"
        style="margin-top: 35px;padding: 0 16px;"
        :rules="rules"
        ref="ruleForm"
      >
        <div class="flex flex-evenly">
          <el-form-item label="卫星编号：" class="item-width" prop="wxbh">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.wxbh"
            ></el-input>
          </el-form-item>
          <el-form-item label="卫星标识：" class="item-width" prop="wxbs">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.wxbs"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex flex-evenly">
          <el-form-item label="传感器标识：" class="item-width" prop="cgqbs">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.cgqbs"
            ></el-input>
          </el-form-item>
          <el-form-item label="卫星工作模式：" class="item-width" prop="wxgzms">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.wxgzms"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex flex-evenly">
          <el-form-item label="历元时刻：" class="item-width" prop="lisj">
            <el-date-picker
              v-model="formLabelAlign.lisj"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="半长轴：" class="item-width" prop="bcz">
            <el-input
              v-max-length-tip="10"
              v-no-space
              v-model="formLabelAlign.bcz"
              @input="handleInput($event, 'bcz')"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex flex-evenly">
          <el-form-item label="偏心率：" class="item-width" prop="pxl">
            <el-input
              v-max-length-tip="10"
              v-no-space
              v-only-number
              v-model="formLabelAlign.pxl"
              @input="handleInput($event, 'pxl')"
            ></el-input>
          </el-form-item>
          <el-form-item label="轨道倾角：" class="item-width" prop="qj">
            <el-input
              v-max-length-tip="10"
              v-no-space
              v-only-number
              v-model="formLabelAlign.qj"
              @input="handleInput($event, 'qj')"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex flex-evenly">
          <el-form-item label="升交点赤经：" class="item-width" prop="sjdcj">
            <el-input
              v-max-length-tip="10"
              v-no-space
              v-only-number
              v-model="formLabelAlign.sjdcj"
              @input="handleInput($event, 'sjdcj')"
            ></el-input>
          </el-form-item>
          <el-form-item label="近地点幅角：" class="item-width" prop="jddfj">
            <el-input
              v-max-length-tip="10"
              v-no-space
              v-only-number
              v-model="formLabelAlign.jddfj"
              @input="handleInput($event, 'jddfj')"
            ></el-input>
          </el-form-item>
        </div>
        <div class="single-form-dom">
          <el-form-item label="平近点角：" prop="pjdj">
            <el-input
              v-max-length-tip="10"
              v-no-space
              v-only-number
              v-model="formLabelAlign.pjdj"
              @input="handleInput($event, 'pjdj')"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveTaskCase('ruleForm')"
          >确 定</el-button
        >
        <el-button @click="cancel('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="uploadDialog"
      title="观测卫星文件上传"
      width="30%"
      @close="closeModal"
    >
      <custom-upload @fileCallback="fileCallback" ref="obserfileRef" />

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadData">确 定</el-button>
        <el-button @click="closeModal">取 消</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
